<template>
  <page-wrap back hide-tab title="修改密码" stay-still>
    <u-form :model="form" ref="uForm" label-position="top" class="form">
      <u-form-item label="旧密码">
        <u-input
          v-model="form.oldPassword"
          type="password"
          placeholder="请输入旧密码"
          :password="true"
          :password-icon="false"
          :clearable="false"
        />
      </u-form-item>
      <u-form-item label="新密码" prop="newPassword">
        <u-input
          v-model="form.newPassword"
          type="password"
          placeholder="请输入新密码"
          maxlength="20"
          :password="true"
          :password-icon="false"
          :clearable="false"
        />
      </u-form-item>
      <u-form-item
        label="确认新密码"
        prop="confirmPassword"
        :border-bottom="false"
      >
        <u-input
          v-model="form.confirmPassword"
          type="password"
          maxlength="20"
          placeholder="请输入新密码"
          :password="true"
          :password-icon="false"
          :clearable="false"
        />
      </u-form-item>
    </u-form>

    <view class="tips">请妥善保管您的密码，8-20位字母、数字、特殊符号，区分大小写</view>
    <view class="btn-submit">
      <u-button type="primary" @click="submit">完成</u-button>
    </view>
  </page-wrap>
</template>

<script>
import { changePassword } from "@/api/index";
import { checkPassword } from '@/utils/handle';

export default {
  data() {
    const passwordValidator = (rule, value, callback) => {
        if (checkPassword(value)) {
          return true
        } else {
          return false
        }
    }
    return {
      personId: uni.getStorageSync("person-id").slice(2) || undefined,
      rules: {
        newPassword: [
          {
            required: true,
            message: "请输入新密码",
            trigger: "blur",
          },
          {
            min: 6,
            message: "密码长度至少为6",
            trigger: "blur",
          },
          {
            validator: passwordValidator,
            message: "8-20位字母、数字、特殊符号，区分大小写",
            trigger: "blur",
          }
        ],
        confirmPassword: [
          {
            // 自定义验证函数
            validator: (rule, value, callback) => {
              // 返回true表示校验通过，返回false表示不通过
              if (this.form.newPassword != value) {
                return false;
              } else {
                return true;
              }
            },
            message: "两次密码不一致",
            trigger: "blur",
          },
        ],
      },
      form: {
        oldPassword: null,
        newPassword: null,
        confirmPassword: null,
      },
    };
  },
  created() {},
  mounted() {},
  methods: {
    submit() {
      this.$refs.uForm.validate((valid) => {
        if (valid) {
          if(this.form.oldPassword == this.form.newPassword) {
            return uni.showToast({
              title: "新密码与旧密码不能相同",
              icon: 'none',
            })
          }
          this.changePassword();
        }
      });
    },
    changePassword() {
      let params = {
        person_id: this.personId,
        oldpassword: this.form.oldPassword,
        newpassword: this.form.newPassword,
      };
      uni.showLoading({
        title: "修改中",
        mask: true,
      });
      changePassword(params).then((res) => {
        uni.hideLoading();
        if (res.code == 200) {
          uni.showToast({
            icon: "none",
            title: "修改成功",
            complete() {
              setTimeout(() => {
                uni.navigateBack();
              }, 1500);
            },
          });
        } else {
          uni.showToast({ icon: "none", title: res.status_desc });
        }
      });
    },
  },
  // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
  onReady() {
    this.$refs.uForm.setRules(this.rules);
  },
};
</script>

<style lang="scss">
.form {
  margin: 32rpx;
  background-color: #ffffff;
  border-radius: 24rpx;
  padding: 0 32rpx;

  .u-form-item {
    padding: 12rpx 0;
    font-size: 26rpx;
  }

  ::v-deep .u-input__input {
    font-size: $uni-font-size-big;
  }
}

.tips {
  text-align: center;
  color: $uni-text-color-888;
  font-size: 24rpx;
}

.btn-submit {
  position: absolute;
  bottom: calc(constant(safe-area-inset-bottom) + 60rpx);
  bottom: calc(env(safe-area-inset-bottom) + 60rpx);
  left: 32rpx;
  right: 32rpx;
  line-height: 88rpx;
}
</style>
